import { View, Image, Text, Input, Button } from "@tarojs/components";
import './index.scss'
import '../../style/card.scss'
import '../../style/button.scss'
import { useState } from "react";
import Taro from "@tarojs/taro";
import { IP_NAME } from "../../configProvider/namespace";
const Register = () => {

  const [profile, setProfile] = useState('https://pic2.imgdb.cn/item/64494af00d2dde57777da267.png');
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [sended, setSended] = useState(false);
  const [verifyCode, setVerifyCode] = useState('');
  const [verified, setVerified] = useState('');
  const [urgeName, setUrgeName] = useState('');
  const [urgePhone, setUrgePhone] = useState('');

  const changeProfile = () => {
    Taro.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      success: (res) => {
        setProfile(res.tempFilePaths[0]);
      }
    })
  }

  //向用户手机号发送验证码
  const sendVerifyMessage = () => {
    if (sended) {
      Taro.showToast({
        title: '请求过于频繁',
        icon: 'none',
        duration: 1000
      });
      return;
    }
    if (!judgePhone(phone)) {
      Taro.showToast({
        title: '号码格式不正确',
        icon: 'error',
        duration: 1000
      });
      return;
    }
    Taro.request({
      url: `${IP_NAME}/msm/send/${phone}`, //仅为示例，并非真实的接口地址
      data: {},
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res: any) {
        console.log(res.data)
        if (res.data.code !== 0) {
          Taro.showModal({
            title: '短信发送失败',
            content: res.data.msg
          });
          return;
        }
        Taro.showToast({
          title: '验证码已发送',
          icon: 'success',
          duration: 1000
        }).then(() => {
          setSended(true);
          setTimeout(() => {
            setSended(false);
          }, 10000)
        })
        setVerifyCode(res.data.data);
      }
    });

  }

  //手机号码合法正则判断
  const judgePhone = (phone: string) => {
    let regu = /^1[3-9][0-9]{9}$/;
    return regu.test(phone);
  }

  //发起注册请求，条件：[手机号已验证，姓名合法，手机号合法，手机号不重复]
  const tryRegister = () => {
    if ([name, phone, urgeName, urgePhone].indexOf('') !== -1) {
      Taro.showToast({
        title: '请先填写信息',
        icon: 'error',
        duration: 1000
      });
      return;
    }
    if (!verified || verified !== verifyCode) {
      Taro.showToast({
        title: '验证码错误',
        icon: 'error',
        duration: 1000
      });
      return;
    }
    if (!judgePhone(urgePhone)) {
      Taro.showToast({
        title: '号码格式不正确',
        icon: 'error',
        duration: 1000
      });
      return;
    }
    if (urgePhone === phone) {
      Taro.showToast({
        title: '号码不能重复',
        icon: 'error',
        duration: 1000
      });
      return;
    }
    Taro.showToast({
      title: '注册成功',
      icon: 'success',
      duration: 1000
    }).then(() => {
      Taro.navigateBack();
    });
  }

  return <>
    <View className="profile-container">
      <Image className="profile" src={profile} onClick={changeProfile} />
    </View>

    <View className="tips">请完善个人信息</View>

    <View className="common-card input-container user-name">
      <Text>真实姓名</Text>
      <Input value={name} className="input" onInput={(e) => { setName(e.target.value) }} />
    </View>
    <View className="common-card input-container user-phone">
      <Text>联系电话</Text>
      <Input value={phone} className="input" onInput={(e) => { setPhone(e.target.value); setVerifyCode(false) }} />
      <View className="verify-phone" onClick={sendVerifyMessage}>发送验证码</View>
    </View>
    <View className="common-card input-container">
      <Text>验证码</Text>
      <Input value={verified} className="input" onInput={(e) => { setVerified(e.target.value) }} />
    </View>
    <View className="common-card input-container urgent-name">
      <Text>紧急联系人</Text>
      <Input value={urgeName} className="input" onInput={(e) => { setUrgeName(e.target.value) }} />
    </View>
    <View className="common-card input-container urgent-phone">
      <Text>紧急联系人电话</Text>
      <Input value={urgePhone} className="input" onInput={(e) => { setUrgePhone(e.target.value) }} />
    </View>

    <Button className="ack-button common-button" onClick={tryRegister}>注册</Button>
  </>
}
export default Register;
